<!-- 店铺 -->
<template>
	<view class="store">
		<view class="classifyDetail_top">
			<view class="topbg">
				<view class="status_bar"></view>
				<!-- 返回 搜索 -->
				<view class="top">
					<view class="back" @click="back"><image src="https://community.chuangxiangdianli.com/images/classify/back .png" mode=""></image></view>
					<view class="serach"><input type="text" confirm-type="search" v-model="keywords" placeholder="羽绒服" @confirm="search" value="" /></view>
				</view>
				<view class="card">
					<view class="storeinfo">
						<view class="left">
							<view class="name">
								<text>{{ storeData.store_name }}</text>
								<text>官方品牌店</text>
							</view>
							<view class="evaluation">
								<uni-rate v-model="rate" :readonly="true" :size="12" :margin="4" />
								<text>好评率{{ storeData.comment_rate }}%</text>
							</view>
						</view>
						<view class="right"><image :src="storeData.store_logo" mode=""></image></view>
					</view>
					<view class="bottom">
						<view>已卖出{{ storeData.sale }}件</view>
						<view @click="callStore">
							<image src="https://community.chuangxiangdianli.com/images/goodsDetail/phone.png" mode=""></image>
							<text>联系店家</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 分类标签页 -->
			<view class="tab">
				<view :class="classify.cate.index == 0 ? 'active' : ''" @click="changeCate(0, '')">全部商品</view>
				<view v-for="(item, index) in storeData.cate" :class="classify.cate.index == index + 1 ? 'active' : ''" @click="changeCate(index + 1, item.id)">{{ item.name }}</view>
			</view>
			<!-- 排序 -->
			<view class="sort">
				<view :class="classify.sort1.index == 0 ? 'active' : ''" @click="changeSort(0, '', '')">
					综合排序
				</view>
				<view :class="classify.sort1.index == 1 ? 'active' : ''" @click="changeSort(1, 'goods_sale', 'asc')">
					销量
					<view style="display: inline-block">
						<view class="jiantou" :class="classify.sort1.sort_order == 'asc' && classify.sort1.index == 1 ? 'active' : ''" style="transform: rotate(0deg)"></view>
						<view class="jiantou" :class="classify.sort1.sort_order == 'desc' && classify.sort1.index == 1 ? 'active' : ''"></view>
					</view>
				</view>
				<view :class="classify.sort1.index == 2 ? 'active' : ''" @click="changeSort(2, 'goods_price', 'asc')">
					价格
					<view style="display: inline-block">
						<view class="jiantou" :class="classify.sort1.sort_order == 'asc'  && classify.sort1.index == 2 ? 'active' : ''" style="transform: rotate(0deg)"></view>
						<view class="jiantou" :class="classify.sort1.sort_order == 'desc'  && classify.sort1.index == 2  ? 'active' : ''"></view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 商品数据 -->
		<view class="content">
			<Default
				:showflag='showflag'
				:type='4'
			></Default>
			<!-- <view class="goodsitem" v-if="storeGoods.length > 0" v-for="(item, index) in storeGoods" :key="index" @click='goDetail(item.id)'>
				<view class="goodsimg"><image :src="item.goods_master_image" mode=""></image></view>
				<view class="goodsinfo">
					<view class="title">
						<text>促销</text>
						<text>{{ item.goods_name }}</text>
					</view>
					<view class="discount">
						<text>满39减5</text>
						<text>金币抵￥8.1</text>
					</view>
					<view class="price">
						<text>￥{{ item.goods_price }}</text>
						<text>卖出{{ item.goods_sale }}单</text>
					</view>
				</view>
			</view> -->
			<waterfallFlow
				:leftData='leftData'
				:rightData='rightData'
			 />
		</view>
	</view>
</template>

<script>
	import waterfallFlow from '../../components/waterfallFlow/waterfallFlow.vue'
export default {
	data() {
		return {
			showflag: false,
			id: '', // 传过来的店铺id
			storeData: {}, // 店铺信息
			storeGoods: [], // 店铺商品
			rate: 5, // 店铺评分
			keywords: '', // 搜索关键词
			classify: {
				cate: {
					index: 0,
					id: ''
				},
				sort1: {
					index: 0,
					str: '',
					sort_order: 'asc'
				}
			},
			leftData: [], // 瀑布流左侧数据
			rightData: [], // 瀑布流右侧数据
		};
	},
	watch: {
		keywords(newV, oldV) {
			if (newV) {
				this.getStoreGoods()
			}
		}
	},
	onLoad(option) {
		if (option.id) {
			this.id = option.id
			console.log('option: ', this.id)
			this.getStoreData()
			this.getStoreGoods()
		}
	},
	methods: {
		//  搜索框
		search() {
			// console.log(this.keywords)
			// 先重置
			this.classify.cate.index = 0
			this.classify.cate.id = ''
			this.classify.sort1.index = 0
			this.classify.sort1.id = ''
			this.classify.sort1.sort_order = 'asc'
			this.getStoreGoods()
		},
		// 更改排序
		changeSort(num, str, str1) {
			// console.log(num, str, str1)
			// if (this.classify.sort1.index == num && this.classify.sort1.sort_order == str1) {
			// 	return
			// } else {
				if (num == 0) {
					this.classify.sort1.str = ''
					this.classify.sort1.sort_order = ''
				} else {
					if ( this.classify.sort1.sort_order == 'asc' ) {
						this.classify.sort1.sort_order = 'desc'
					} else {
						this.classify.sort1.sort_order = 'asc'
					}
					this.classify.sort1.str = str
					// this.classify.sort1.sort_order = str1
				}
				this.classify.sort1.index = num
				
				this.getStoreGoods()
			// }
		},
		//  改变分类
		changeCate(num, id) {
			console.log(num)
			if (this.classify.cate.index == num) {
				return
			} else {
				this.classify.cate.index = num
				this.classify.cate.id = id
				this.getStoreGoods()
			}
		},
		//  联系店家
		callStore() {
			var that = this
			if (!that.storeData.customer_server_phone) {
				uni.showToast({
					title: '暂无店铺的联系方式！',
					icon: 'none'
				})
				return
			}
			uni.makePhoneCall({
			    phoneNumber: that.storeData.customer_server_phone
			});
		},
		//  返回按钮事件
		back() {
			uni.navigateBack()
		},
		//  跳转商品详情
		goDetail(id) {
			uni.navigateTo({
				url: '/other/goodsDetail/index?goods_id=' + id
			})
		},
		//  获取店铺信息
		getStoreData() {
			var that = this
			this.$mrequest({
				url: 'Mini/store/StoreInfo',
				method: 'POST',
				data: {
					id: that.id
				},
				callBack:function callBack (res) {
					// console.log('店铺信息', res)
					if (res.status) {
						that.storeData = res.data
						that.rate = (res.data.comment_rate / 20).toFixed(1)
						console.log('评分', that.rate)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				},
				fail: function fail (res) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})
		},
		// 获取店铺商品
		getStoreGoods() {
			var that = this
			var data = {}
			data.class_id = that.classify.cate.id
			data.store_id = that.id
			data.keywords = that.keywords
			data.sort_type = that.classify.sort1.str
			data.sort_order = that.classify.sort1.sort_order
			console.log('打印提交参数', data)
			this.$mrequest({
				// url: 'Mini/store/StoreGoodsList',
				url: 'Mini/goods/goodsList',
				method: 'POST',
				data: data,
				callBack:function callBack (res) {
					console.log('店铺商品获取成功', res)
					if (res.status) {
						that.storeGoods = res.data.data
						if (that.storeGoods.length > 0) {
							that.showflag = false
							var left = []
							var leftHeight = 0
							var right = []
							var rightHeight = 1
							that.storeGoods.map((item, index) => {
								if (leftHeight < rightHeight) {
									if (item.full_reductions.length > 0) {
										leftHeight += 260
									} else {
										leftHeight += 234
									}
									left.push(item)
								} else {
									if (item.full_reductions.length > 0) {
										rightHeight += 260
									} else {
										rightHeight += 234
									}
									right.push(item)
								}
							})
							that.leftData = left
							that.rightData = right
						} else {
							that.showflag = true
							that.leftData = []
							that.rightData = []
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				},
				fail: function fail (res) {
					console.log('店铺商品获取失败', res)
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})
		},
	},
}
</script>

<style lang="scss">
page {
	background: #f7f6f9;
}
.store {
	position: relative;
	.classifyDetail_top {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #ffffff;
		z-index: 10;
		.topbg {
			width: 100%;
			height: 330rpx;
			background: url(https://cdn.jsdelivr.net/gh/heroqyc/blogImg/pageImg/20210204163918.png);
			background-size: 100% 100%;
			position: relative;
			margin-bottom: 120rpx;
			.card {
				width: 690rpx;
				height: 244rpx;
				background: #fff;
				position: absolute;
				left: 30rpx;
				bottom: -100rpx;
				box-shadow: 0px 6rpx 20rpx 0px rgba(0, 0, 0, 0.08);
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 30rpx;
				.storeinfo {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: top;
					.left {
						width: 75%;
						margin-right: 5%;
						
						.name {
							margin-top: 10rpx;
							text:nth-child(1) {
								display: inline-block;
								// width: 70%;
								font-size: 32rpx;
								line-height: 32rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #2f3135;
								overflow:hidden; //超出的文本隐藏
								text-overflow:ellipsis; //溢出用省略号显示
								white-space:nowrap; //溢出不换行
								
							}
							text:nth-child(2) {
								display: inline-block;
								// width: 30%;
								margin-left: 10rpx;
								text-align: center;
								font-size: 24rpx;
								line-height: 32rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #fff;
								background: url(https://community.chuangxiangdianli.com/images/store/guanfang.png);
								background-size: 100% 100%;
								overflow:hidden; //超出的文本隐藏
								text-overflow:ellipsis; //溢出用省略号显示
								white-space:nowrap; //溢出不换行
							}
						}
						.evaluation {
							display: flex;
							align-items: center;
							justify-content: flex-start;
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 500;
							margin-top: 28rpx;
							color: #999999;
							image {
								width: 23rpx;
								height: 23rpx;
								margin: 0 6rpx;
							}
							text{
								margin-left: 10rpx;
							}
						}
					}
					.right {
						width: 20%;
						text-align: right;
						image {
							width: 117rpx;
							height: 117rpx;
						}
					}
				}
				.bottom {
					width: 100%;
					display: flex;
					margin-top: 30rpx;
					align-items: center;
					justify-content: space-between;
					view{
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #B6B8BC;
						image{
							width: 33rpx;
							height: 33rpx;
							margin: 0 18rpx;
						}
					}
				}
			}
			.status_bar {
				width: 100%;
				height: var(--status-bar-height);
			}

			.top {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: top;
				padding-top: 30rpx;
				justify-content: flex-start;
				box-sizing: border-box;
				.back {
					padding: 0 30rpx;
					image {
						width: 28rpx;
						height: 28rpx;
						margin-top: 16rpx;
					}
				}
				.serach {
					input {
						width: 423rpx;
						height: 59rpx;
						border-radius: 30px;
						padding-left: 30rpx;
						background: #000;
						opacity: 0.23;
						color: #fff;
					}
				}
			}
		}

		.tab {
			height: 100rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			overflow-x: auto;
			view {
				font-size: 28rpx;
				font-family: PingFang SC;
				color: #2c2c2c;
				margin: 0 20rpx;
				white-space: nowrap;
			}
			.active {
				color: #34c39e;
			}
		}
		.sort {
			width: 100%;
			height: 60rpx;
			box-sizing: border-box;
			padding: 0 36rpx;
			padding-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			view {
				// width: 30%;
				flex: 1;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 50rpx;
				color: #000;
				box-sizing: border-box;
				text-align: center;
				.jiantou{
					display: block;
					width: 0;
					height: 0;
					border-color: transparent transparent #333333 transparent;  /*1、下边框有颜色 对应着上边框没有宽度,是正三角形；2、上边框有颜色 对应着下边框没宽度，是倒三角形*/
					border-style: solid;
					border-width: 0 10rpx 10rpx 10rpx;
					transform: rotate(180deg);
					margin-left: 10rpx;
					margin-top: 5rpx;
				}
				.active{
					border-color: transparent transparent #f55519 transparent;
				}
			}
			// view:nth-child(1){
			// 	width: 40%;
			// }

			.active {
				color: #f55519;
			}
		}
	}

	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 0 10rpx;
		padding-top: calc(550rpx + var(--status-bar-height));
		box-sizing: border-box;
		margin-bottom: 40rpx;
		.goodsitem {
			width: 48%;
			height: 522rpx;
			margin: 10rpx 1%;
			display: inline-block;
			background: #fff;
			border-radius: 8rpx;
			.goodsimg {
				width: 100%;
				image {
					width:98%;
					height: 346rpx;
					margin-left: 1%;
				}
			}
			.goodsinfo {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				.title {
					width: 1005;
					height: 30rpx;
					margin-bottom: 16rpx;
					text:nth-child(1) {
						display: inline-block;
						width: 20%;
						line-height: 30rpx;
						background: #f55519;
						text-align: center;
						border-radius: 6rpx;
						margin-right: 10rpx;
						font-size: 18rpx;
						font-family: Source Han Sans CN;
						color: #ffffff;
						overflow:hidden; //超出的文本隐藏
						text-overflow:ellipsis; //溢出用省略号显示
						white-space:nowrap; //溢出不换行
					}
					text:nth-child(2) {
						width: 75%;
						display: inline-block;
						font-size: 25rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #2f2f2f;
						overflow:hidden; //超出的文本隐藏
						text-overflow:ellipsis; //溢出用省略号显示
						white-space:nowrap; //溢出不换行
						line-height: 30rpx;
					}
				}
				.discount {
					width: 100%;
					height: 30rpx;
					margin-bottom: 20rpx;
					text {
						display: inline-block;
						font-size: 18rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #d53128;
						margin-right: 10rpx;
						padding: 4rpx 10rpx;
						background: url(https://community.chuangxiangdianli.com/images/store/goods_biao.png);
						background-size: 100% 100%;
					}
				}
				.price {
					width: 100%;
					height: 30rpx;
					text:nth-child(1) {
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #f55519;
						margin-right: 10rpx;
					}
					text:nth-child(2) {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}
			}
		}
	}


}
</style>
